<template>
	<div class="home">
		<div class="statistics">
			<div class="stat-card">
				<h3>今日订单</h3>
				<p>{{ todayOrders }}</p>
			</div>
			<div class="stat-card">
				<h3>总销售额</h3>
				<p>{{ totalSales }}</p>
			</div>
			<div class="stat-card">
				<h3>总用户数</h3>
				<p>{{ totalUsers }}</p>
			</div>
			<div class="stat-card">
				<h3>总商品数</h3>
				<p>{{ totalGoods }}</p>
			</div>
		</div>

		<div class="charts">
			<div class="chart-container">
				<v-chart class="chart" :option="salesChartOptions" autoresize />
			</div>

			<div class="chart-container">
				<v-chart class="chart" :option="ordersChartOptions" autoresize />
			</div>
		</div>
		<div class="dashboard-container uw-mt-10">
		    <!-- Active Users Chart -->
			<div class="chart-container">
				<v-chart :option="activeUsersOption" class="chart" />
			</div>
		
		    <!-- User Distribution Chart -->
			<div class="chart-container">
				<v-chart :option="userDistributionOption" class="chart" />
			</div>
		    <!-- Behavior Trend Chart -->
			<div class="chart-container">
				<v-chart :option="behaviorTrendOption" class="chart" />
			</div>
		  </div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { use } from 'echarts/core';
	import { CanvasRenderer } from 'echarts/renderers';
	import { LineChart, BarChart } from 'echarts/charts';
	import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components';
	import VChart from 'vue-echarts';

	// 使用需要的 ECharts 组件
	use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent]);

	// 模拟一些数据
	const todayOrders = ref(56);
	const totalSales = ref('¥120,000');
	const totalUsers = ref(2500);
	const totalGoods = ref(134);

	// 销售趋势（折线图）配置
	const salesChartOptions = ref({
		title: {
			text: '销售趋势',
			left: 'left',
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				name: '销售额',
				type: 'line',
				data: [820, 932, 901, 934, 1290, 1330, 1320],
			},
		],
	});

	// 订单趋势（柱状图）配置
	const ordersChartOptions = ref({
		title: {
			text: '订单趋势',
			left: 'left',
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				name: '订单量',
				type: 'bar',
				data: [220, 182, 191, 234, 290, 330, 310],
			},
		],
	});
	const activeUsersOption = ref({
	  title: {
	    text: '活跃用户数',
	    left: 'left',
	  },
	  tooltip: {},
	  xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	  },
	  yAxis: {
	    type: 'value',
	  },
	  series: [
	    {
	      data: [100, 150, 120, 180, 210, 250, 300],
	      type: 'line',
	      smooth: true,
	    },
	  ],
	});
	
	const userDistributionOption = ref({
	  title: {
	    text: '用户分布',
	    left: 'left',
	  },
	  tooltip: {
	    trigger: 'item',
	    formatter: '{a} <br/>{b}: {c} ({d}%)',
	  },
	  series: [
	    {
	      name: '用户分布',
	      type: 'pie',
	      radius: '50%',
	      data: [
	        { value: 335, name: '区域 A' },
	        { value: 310, name: '区域 B' },
	        { value: 234, name: '区域 C' },
	        { value: 135, name: '区域 D' },
	        { value: 1548, name: '区域 E' },
	      ],
	    },
	  ],
	});
	
	const behaviorTrendOption = ref({
	  title: {
	    text: '用户行为趋势',
	    left: 'left',
	  },
	  tooltip: {
	    trigger: 'axis',
	  },
	  legend: {
	    data: ['浏览', '购买', '注册'],
	  },
	  xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	  },
	  yAxis: {
	    type: 'value',
	  },
	  series: [
	    {
	      name: '浏览',
	      type: 'line',
	      data: [50, 70, 60, 80, 90, 110, 120],
	    },
	    {
	      name: '购买',
	      type: 'line',
	      data: [20, 30, 25, 35, 40, 45, 50],
	    },
	    {
	      name: '注册',
	      type: 'line',
	      data: [5, 8, 7, 10, 12, 15, 18],
	    },
	  ],
	});
</script>

<style scoped>
	.home {
		display: flex;
		flex-direction: column;
	}

	.statistics {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		margin-bottom: 10px;
	}

	.stat-card {
		background-color: #FFF;
		padding: 20px;
		border-radius: 8px;
		text-align: center;
	}

	.stat-card h3 {
		margin: 0;
		font-size: 18px;
	}

	.stat-card p {
		font-size: 24px;
		color: #333;
	}

	.charts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.chart-container {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
	}

	.chart {
		width: 100%;
		height: 300px;
	}
	.dashboard-container{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;
	}
</style>